'use client';

import { useAuth } from '@/hooks/use-auth';
import { Menu } from 'lucide-react';
import { UserAvatarMenu } from "./user-avatar-menu";
import { Button } from '../ui/button';

interface HeaderProps {
  onMenuClick?: () => void;
}

export function Header({ onMenuClick }: HeaderProps) {
  const { user } = useAuth();
  
  if (!user) return null;

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-14 items-center justify-between px-4">
        <div className="flex items-center gap-4">
          {onMenuClick && (
            <Button
              variant="ghost"
              size="icon"
              className="lg:hidden"
              onClick={onMenuClick}
            >
              <Menu className="h-5 w-5" />
              <span className="sr-only">打开菜单</span>
            </Button>
          )}
          <span className="font-semibold">家校通系统</span>
        </div>
        <UserAvatarMenu
          name={user.name}
          role={user.role}
          imageUrl={user.avatar}
        />
      </div>
    </header>
  );
} 